<template>
	<view>
		<view class="sign_conent_box">
			<view class="sign_conent">
				<view class="sign_conent_title">每日签到</view>
				<view class="sign_list_aligns">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view class="scroll_view_items" v-for="(item, index) in sign_list" :key="index">
							<view class="jifenbox">
								<view class="jifen" v-if="index!=2&& index!=6">{{item.discount}}</view>
								<view class="jifen jifen1" v-else>{{item.discount}}</view>				
							</view>			
							<view class="scroll_view_itemsv">
								<view class="scroll_view_item">
									<view class="scroll_view_item_img_box">
										<image src="../../../static/sign1.png" class="scroll_view_item_img" mode=""></image>										
									</view>
									<view class="scroll_view_item_tips">{{ item.day }}天</view>
								</view>								
							</view>
							<view class="scroll_xian" ></view>
						</view>
						<view class="xian-line"></view>
					</scroll-view>
				</view>				
			</view>
		</view>
		<view class="sign_conent_btn" @click="cksigin()">立即签到</view>
		<view class="sign-bottom">
			<view class="text1">签到规则</view>
			<view class="text2">1、登录用户每天可签到1次，并领取积分奖励。</view>
			<view class="text2">2、连续签到天数越长，获得的奖励越多。若连续签到中断，则重新计算天数。</view>
			<view class="text2">3、如果出现用户违规行为,系统有权立即终止其签到。</view>		
		</view>
		<!-- 弹出框 -->
		<view class="popup" v-show="show">
			<view class="popup-info">
				<view class="content">
					<view class="content-top">
						<image src="../../../static/signbg.png" class="signbg"></image>
						<view class="qd">签到成功</view>
						<view class="qd" style="top: -20rpx;">恭喜您获得150积分</view>
					</view>
					<view class="popup-btn">
						<button type="default" class="btn cancell" @tap="cancel">关闭</button>
						<button type="default" class="btn affirm" @tap="affirm">确认</button>
					</view>	
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			sign_list: [
				{
					discount: '10积分',
					day: '1'
				},
				{
					discount: '10积分',
					day: '2'
				},
				{
					discount: '连续签到+80积分',
					day: '3'
				},
				{
					discount: '10积分',
					day: '4'
				},
				{
					discount: '10积分',
					day: '5'
				},
				{
					discount: '10积分',
					day: '6'
				},
				{
					discount: '连续签到+80积分',
					day: '7'
				}
			],
			show: false
		};
	},
	methods: {		
		//弹窗点击事件
		cksigin(e) {
			this.show = true;			
		},
		// 点击弹窗取消
		cancel() {
			this.show = false;
		},
		// 点击弹窗确认
		affirm() { 
			this.show = false;
		}
	}
};
</script>

<style lang="scss">
	.align-center {
	  display: flex;
	  align-items: center;
	}
.sign_conent_box {
	width: 100%;
	display: flex;
	justify-content: center;
	background: #84C0F4;
	height: 220rpx;
	.sign_conent {
		width: 686upx;
		background: white;
		border-radius: 20upx;
		padding: 40upx 32upx;
		box-sizing: border-box;
		height:380rpx;
		margin-top: 28rpx;
		box-shadow: 0px 3px 6px 1px rgba(132, 192, 244, 0.30196078431372547);
		.sign_conent_title {
			width: 100%;
			font-size: 36upx;
			font-weight: bold;
			color: #333333;
			.sign_conent_title_span {
				color: #ff6526 !important;
			}
		}
		.sign_list_aligns {
			width: 100%;
			padding: 32rpx 0 64upx 0;
			box-sizing: border-box;
			.scroll-view_H {
				width: 100%;
				display: flex;
				white-space: nowrap;
				height:220rpx;
				
			}
			.scroll_view_items {
				display: inline-block;
				width: 120rpx;
				margin: 0 4rpx;
			}
			.jifenbox{
				
				.jifen{
					text-align: center;
					font-size: 20rpx;
					background: #ECF5FE;
					position: relative;
					top:-8rpx;
					color:#666;
				}
				.jifen1{
					background: #FFFAE4;
					white-space:normal;
					top: -2rpx;
					color: #C19800;
					font-size: 20rpx;
					width: 80rpx;
					    padding: 0 13rpx;
				}
			}
			
		
			.scroll_view_item {
				.scroll_view_item_img_box {					
					height:35rpx;
					position: relative;
				}
				.scroll_view_item_tips {
					text-align: center;
					font-size: 26upx;
					padding-top: 16upx;
					color: #333333;
				}
				.scroll_view_item_img {
					width: 32rpx;
					height:35rpx;
					display: block;
					margin: 0 auto;
				}
			}
			.scroll_xian {
				width:24rpx;
				height: 24rpx;
				background: #84C0F4;
				border-radius: 50%;
				margin: 0px auto;
				position: relative;
				top: 12rpx;
			}
			.xian-line{
				width: 892rpx;
				height: 2rpx;
				background: #84C0F4;
			}
		}
		
	}
	
}
.sign_conent_btn {
			width: 100%;
			border-radius: 8rpx;
			background:#84C0F4;
			color: #ffffff;
			text-align: center;
			padding: 22upx 0;
			font-size: 32upx;
			margin: 265rpx auto 30rpx auto;
			width: 592rpx;
		}
.sign-bottom{
	padding: 32rpx;
		.text1{
			font-size: 28rpx;
			color: #333;
			margin-top: 20rpx;
		}
		.text2{
			font-size: 28rpx;
			color: #666;
			margin-top: 14rpx;
		}
	}
.uni-scroll-view, .uni-scroll-view-content.uni-scroll-view{
	overflow: initial!important;
}
.popup{
	width: 100%;
	height: 100vh;
	z-index: 2;
	background: #8e8e8e;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.4);
	.popup-info{
		width: 80%;
		height: 368rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		opacity: 1;
		display: flex;
		align-items: center;
	}
}
.content-top{
	position: relative;
	.signbg{
		width: 204rpx;
		height: 152rpx;
		display: block;
		position: relative;
		top: -40px;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.qd{
		font-size: 28rpx;
		color: #333;
		text-align: center;
		position: relative;
		top: -38rpx;
	}
}
.popup-btn{
	display: flex;
	justify-content: space-between;
	width: 100%;
	border-top: 2rpx solid #ddd;
	margin-top: 56rpx;
	.btn{
		width: 50%;		
		text-align: center;
		line-height:78rpx;	
	}
	.cancell{
		color: #999;
		border-right: 2rpx solid #ddd;
		border-bottom-left-radius: 20rpx;
	}
	.affirm{
		color: #71B9F8;
		border-bottom-right-radius: 20rpx;
	}
}
</style>
